<!--
 * @Author: zzy zhangzeyang@huidr.com
 * @Date: 2025-04-29 11:33:03
 * @LastEditors: zzy zhangzeyang@huidr.com
 * @LastEditTime: 2025-07-31 13:14:25
 * @FilePath: \about_vue\src\views\page3.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="containerView">
    <div class="image-grid-container">
      <div class="image-grid">
        <div v-for="(item, index) in imageList" :key="index" class="image-card">
          <div v-if="index==0" class="grid-image" style="display: flex; align-items: center; height: 100%;">
              <img :src="item.url" :alt="item.description" style="width: 100%; object-fit: contain;">
          </div>
          <img :src="item.url" :alt="item.description" class="grid-image"  v-else>
          <div class="image-description">{{ item.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const imageList = ref([
  // { url: '/images/11.png', description: '1被邀请医生收到邀请' },
  // { url: '/images/12.png', description: '2-拒绝邀请并输入理由' },
  // { url: '/images/13.png', description: '3-多学科讨论列表' },
  // { url: '/images/14.png', description: '4-多学科讨论页面' },


// { url: '/images/20.png', description: '1-选择患者点击多学科讨论按钮' },
// { url: '/images/21.png', description: '2-填写多学科讨论信息' },
  // { url: '/images/22.png', description: '3-选择多学科讨论医生' },
  // { url: '/images/23.png', description: '4-多学科讨论页' },
  // { url: '/images/24.png', description: '5-多学科讨论信息页面' },
  // { url: '/images/25.png', description: '1-首页多学科讨论列表' },

  // { url: '/images/31.png', description: '1-患者收到多学科讨论创建通知,并且展示多学科讨论' },
  // { url: '/images/32.png', description: '2-点击讨论打开讨论页面' },
  // { url: '/images/33.png', description: '3-对应的主诊医生也展示多学科讨论入口' },

    //{ url: '/images/101.png', description: '1使用手机号快捷登录' },
 //{ url: '/images/102.png', description: '2点击弹窗底部的“立即订阅”蓝色按钮' },
   //{ url: '/images/103.png', description: '3打开消息未读提醒并点击允许按钮' },


       { url: '/images/104.png', description: '1微信列表内服务通知' },
 { url: '/images/105.png', description: '2点击服务通知底部"进入小程序查看"' },
   { url: '/images/106.png', description: '3打开小程序咨询页' },

 

]);
</script>

<style scoped>
.image-grid-container {
  padding: 20px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow-y: auto;
  box-sizing: border-box;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.image-description {
  margin-top: 15px;
  text-align: center;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  /* position: absolute; */
  bottom: 0;
  left: 0;
  border-radius: 10px;
  border:4px solid #c9c9c9;
  
}

.image-card {
  width: calc(25% - 15px);
  /* width:200px; */
  min-width: 150px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  transition: transform 0.2s;
  overflow: hidden;
}

.grid-image {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1179/2556;
  border-radius: 4px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* .image-card:first-child {
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
} */

/* .image-card:first-child .grid-image {
  aspect-ratio: 1/1;
  object-fit: contain;
  width: 80%;
  margin: 0 auto;
} */

/* .image-description {
  margin-top: 10px;
  text-align: center;
  color: #333;
  font-size: 14px;
} */

/* @media screen and (max-width: 1200px) {
  .image-card {
   
    width: calc(20% - 15px);
  }
} */

/* @media screen and (max-width: 900px) {
  .image-card {
    width: calc(50% - 15px);
  }
}

@media screen and (max-width: 600px) {
  .image-card {
    width: calc(100% - 15px);
    min-width: auto;
  }
} */
</style>